<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="DS.searchForm" :FormConfig />

    <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-select allowClear style="width:25%" placeholder="性别" v-model:value="DS.searchForm.sex">
            <a-select-option value="男">男</a-select-option>
            <a-select-option value="女">女</a-select-option>
        </a-select>
        <a-input allowClear style="width: 60%;" v-model:value="DS.searchForm.name" placeholder="姓名" />
        <a-button @click="DS.getUserData">
            <template #icon>
                <SearchOutlined />
            </template>
        </a-button>
        <a-button type="primary" @click="addFormRef.open = true">
            <template #icon>
                <PlusOutlined />
            </template>
        </a-button>
    </a-input-group>

    <a-card>
        <a-spin :spinning="DS.loading">
            <a-table bordered :scroll :columns :pagination="DS.searchForm" :dataSource="DS.tableData"
                @change="DS.getUserData">
                <template #bodyCell="{ text, record, index, column }">
                    <template v-if="column.dataIndex === 'action'">
                        <a-popover trigger="hover">
                            <template #content>
                                <div class="bg">
                                    <CloudDownloadOutlined @click="downloadQrCode(record.info)" />
                                </div>
                                <a-qrcode ref="QrCode" error-level="H" :value="record.info" />
                            </template>
                            <Btn type="link">二维码</Btn>
                        </a-popover>
                        <Btn type="link" @click="editFn(record)">编辑</Btn>

                        <a-popconfirm title="此操作不可逆，是否继续？" ok-text="确定" cancel-text="取消"
                            @confirm="DS.delUserData(record.info)" @cancel="EventBus.emit('CancleInfo')">
                            <Btn type="link">删除</Btn>
                        </a-popconfirm>
                    </template>
                </template>
            </a-table>
        </a-spin>
    </a-card>

    <!-- 添加 -->
    <ModalForm ref="addFormRef" type="add" :FormValue="DS.addForm" :FormConfig="addForm" :rules="addRules"
        :okFn="DS.addUserData" />
    <!-- 修改 -->
    <ModalForm ref="editFormRef" type="edit" :FormValue="DS.editForm" :FormConfig="editForm" :okFn="DS.editUserData"
        :rules="editRules" />
    <!-- 上传数据注册 -->
    <Upload ref="uploadTemplateRef" url="/uploadDevice" showTemplate :selectedFn="(file: File) => {
        DS.modelForm.multipartFile = [file]
    }" :fn="() => { DS.uploadModel() }" />
</template>
<script lang='ts' setup>
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { CloudDownloadOutlined } from '@ant-design/icons-vue'
import { onUnmounted, provide, ref, inject, type Ref } from 'vue'

import { useDoctor } from '@/stores/Doctor'
import { searchConfig, searchSelfConfig, addConfig, editConfig, columns, addSelfConfig, editSelfConfig } from '@/config/Doctor'
import { createForm } from '@/utils/CreateForm';
import { createBtns } from '@/utils/createPermissionBtns';

import { debounce } from 'lodash'
import EventBus from '@/utils/EventBus'
import { useCommon } from '@/stores/Common'
import { useTableScroll } from '@/utils/GetTableScroll'
const CommonStore = useCommon()

const { FormConfig } = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { labelAlign: 'right', layout: 'inline', labelCol: { span: 3 } },)
const { FormConfig: addForm, FormRules: addRules } = new createForm(CommonStore.department != '检验科' ? addSelfConfig : addConfig)
const { FormConfig: editForm, FormRules: editRules } = new createForm(CommonStore.department != '检验科' ? editSelfConfig : editConfig)

const DS = useDoctor()
DS.getUserData()

const addFormRef = ref()
const editFormRef = ref()
const QrCode = ref()
const uploadTemplateRef = ref()

const scroll = useTableScroll('searchCard')

provide('permissionBtns', createBtns({
    query: debounce(() => { DS.searchForm.pageNo = 1; DS.getUserData() }, 1000),
    add: () => addFormRef.value.open = true,
    downloadModel: () => DS.downloadModel(),
    uploadModel: () => uploadTemplateRef.value.open = true
}))

function editFn(record: any) {
    console.log(record);

    editFormRef.value.open = true
    DS.editForm = { ...record }
}

async function downloadQrCode(info: string) {
    const url = await QrCode.value.toDataURL();
    const a = document.createElement('a');
    a.download = `${info}.png`;
    a.href = url;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}


onUnmounted(() => {
    DS.$reset()
})

</script>
<style lang='scss' scoped>
.bg {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 160px;
    height: 160px;
    // transition: all .3s;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000080;
    color: #fff;
    font-size: 28px;
}

.ant-popover-content {
    &:hover {
        .bg {
            z-index: 1
        }
    }
}
</style>